<template>
  <div
    class="pb-12 min-h-screen"
    style="min-width: 1200px; width: 1200px; margin: auto"
  >
    <!-- <router-link :to="{ path: '/' }">
      <div class=" py-4 bg-white ">
        <h2 class="text-xl pt-2 font-bold">
          江西省独角兽 | 瞪羚
        </h2>
        <h2 class="text-xl pt-2 font-bold">
          企业服务平台
        </h2>
      </div>
    </router-link> -->
    <div class="flex justify-between py-2 mb-4 align-middle border-b">
      <span class="text-xl font-bold"> 公告列表 </span>
      <div class="text-sm">
        当前位置:
        <router-link :to="{ path: '/' }" class="alink"> 首页 </router-link>
        /
        <router-link :to="{ name: 'notice' }" class="alink">
          通知公告
        </router-link>
        /
        <span> 公告详情 </span>
      </div>
    </div>
    <div class="text-xl py-8">
      <h2 class="font-bold text-center pb-8 text-2xl">
        {{ detailInfo.title ? detailInfo.title : "" }}
      </h2>
      <div class="py-4">
        <div ref="noticeContent" v-html="detailInfo.content"></div>
      </div>

      <!-- <div class="py-4" v-if="detailInfo.fileList.length > 0">
        <h2 class="py-4">
          附件列表：
        </h2>
        <a
          class="text-blue-500  alink cursor-pointer"
          v-for="item in detailInfo.fileList"
          :key="item.pathName"
          :href="addUrlhead(item.pathName)"
        >
          {{ item.fileName }}
        </a>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getNoticeDetail } from "@/api/notice";
import loginVue from "../login.vue";
export default {
  name: "noticeDetail",
  computed: {
    addUrlhead() {
      return (url) => {
        return process.env.VUE_APP_BASE_API + "/file/" + url;
      };
    },
  },
  data() {
    return {
      baseUrl: process.VUE_APP_BASE_API,
      detailId: -1,
    };
  },
  created() {
    this.initId();
    this.getDetailInfo(this.detailId);
  },
  data() {
    return {
      aLocalhead: "http",
      defaultAHead: "http://kjt.jiangxi.gov.cn",
      detailInfo: {
        annunciatePolicyId: "",
        title: "",
        publishTime: "",
        content: "",
      },
    };
  },
  mounted() {
    this.initContentClick();
  },
  beforeDestroy() {
    this.$refs["noticeContent"].removeEventListener(
      "click",
      this.handleContentClick
    );
  },
  methods: {
    initContentClick() {
      this.$refs["noticeContent"].addEventListener(
        "click",
        this.handleContentClick
      );
    },
    handleContentClick(event) {
      var target = event.target || event.srcElement;
      if (target.nodeName.toLocaleLowerCase() === "a") {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          window.event.returnValue = true;
        }
        var url = target.getAttribute("href");
        let resUrl = url;
        // 导入的数据 的  a 链接

        if (resUrl.indexOf(this.aLocalhead) === -1) {
          resUrl = this.defaultAHead + resUrl;
        }
        window.open(resUrl,'_blank');
      }
    },
    initId() {
      let nowId = this.$route.query.id;

      if (nowId) {
        this.detailId = nowId;
      }
    },
    getDetailInfo(id) {
      getNoticeDetail(id).then((res) => {
        if (res.code == 200) {
          let resInfo = res.data;
          if (resInfo) {
            this.detailInfo = resInfo;
          }
        }
      });
    },
  },
};
</script>

<style></style>
